<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英雄详情</title>
    <style>
        body {
            margin: 0;
        }

        #imgbg {
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="bg">
        <img src="" alt="" id="imgbg">
    </div>
    <div id="spells">
    </div>
</body>
<script src="./request.js"></script>
<script>
    // 解析路径获取id
    // console.log(location.search.split("=")[1])
    let id = location.search.split("=")[1];
    // 根据当前英雄id 发送请求获取英雄详情
    // let xhr = new XMLHttpRequest();
    // xhr.open("get",`https://game.gtimg.cn/images/lol/act/img/js/hero/${id}.js`);
    // xhr.send();
    // xhr.onreadystatechange = ()=>{
    //     if(xhr.readyState ===4){
    //         let data = JSON.parse(xhr.response);
    //         console.log(data)
    //         let bgurl = data.skins[0].mainImg;
    //         console.log(bgurl)
    //         // 给img标签设置src属性
    //         document.getElementById("imgbg").setAttribute("src",bgurl)
    //         let html = ""
    //         data.spells.forEach(item=>{
    //             let div = `<div> <img src="${item.abilityIconPath}" alt=""><div>${item.description}</div></div>`
    //             html+=div;
    //         })
    //         document.getElementById("spells").innerHTML = html;
    //     }
    // }
    // request("get", `https://game.gtimg.cn/images/lol/act/img/js/hero/${id}.js`).then(data => {
    //     let bgurl = data.skins[0].mainImg;
    //     console.log(bgurl)
    //     // 给img标签设置src属性
    //     document.getElementById("imgbg").setAttribute("src", bgurl)
    //     let html = ""
    //     data.spells.forEach(item => {
    //         let div = `<div> <img src="${item.abilityIconPath}" alt=""><div>${item.description}</div></div>`
    //         html += div;
    //     })
    //     document.getElementById("spells").innerHTML = html;
    // })

    let getInfo = async () => {
        let data = await request("get", `https://game.gtimg.cn/images/lol/act/img/js/hero/${id}.js`);
        let bgurl = data.skins[0].mainImg;
        console.log(bgurl)
        // 给img标签设置src属性
        document.getElementById("imgbg").setAttribute("src", bgurl)
        let html = ""
        data.spells.forEach(item => {
            let div =
                `<div> <img src="${item.abilityIconPath}" alt=""><div>${item.description}</div></div>`
            html += div;
        })
        document.getElementById("spells").innerHTML = html;
    }
    getInfo();
</script>

</html>